<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(18, 221, 28);
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            background-color: rgb(228, 17, 182);
        }
    </style>
</head>

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <script>
        // 1.先隐藏所有的div 2.找到 点击btn的 下标 让下标对应的div显示；
        // 一、获取所有的按钮 然后绑定点击事件
        var btn = document.querySelectorAll("button");
        var odiv = document.querySelectorAll("div");
        btn.forEach(function(i, k) {
            console.log(i, k);
            i.onclick = function() {
                console.log(i);
                // 把所有的div隐藏起来；
                odiv.forEach(function(v) {
                    v.style.display = "none";
                });
                // 把点击按钮键名和div键名相同的div显示出来
                odiv[k].style.display = "block";
                console.log(odiv[k]);
                // 给当前点击的按钮背景颜色；
                /*  console.log(btn[k]);
                                                                                                                                              console.log(this);
                                                                                                                                              // 去掉所有按钮的背景颜色 
                                                                                                                                              
                                                                                                                                              */
                btn.forEach(function(b) {
                    b.style.background = "";
                });
                // 当前点击的按钮换背景颜色
                this.style.background = "pink";
            };
        });
    </script>
</body>

</html>